<template>
  <image
    class="s-image"
    :class="customClass"
    :src="src"
    :mode="mode"
    :style="c_style"
    :lazy-load="lazyLoad"
    :fade-show="fadeShow"
    :webp="webp"
    :show-menu-by-longpress="showMenuByLongpress"
    @click="handleClick"
    @load="handleLoad"
    @error="handleError"
  />
</template>

<script>
import addUnit from '../../utils/addUnit';
import mergeStyle from '../../utils/mergeStyle';

/**
 * s-image 图片
 * @description 图片组件
 * @property {String|Object|Array} customClass 自定义class
 * @property {String} src 图片路径
 * @property {String} mode = [aspectFill] 图片图片裁剪、缩放的模式
 * @property {String|Number} width 图片宽度
 * @property {String|Number} height 图片高度
 * @property {String|Number} borderRadius 图片圆角
 * @property {String|Object} customStyle style样式
 * @property {Boolean} lazyLoad image lazy-load属性 默认为false
 * @property {Boolean} fadeShow image fade-show属性 默认为true
 * @property {Boolean} webp image webp属性 默认为false
 * @property {Boolean} showMenuByLongpress image show-menu-by-longpress属性 默认为false
 * @example <s-image src="" width="100" height="100" />
 */
export default {
  name: 'SImage',
  props: {
    customClass: {
      type: [String, Object, Array],
      default: '',
    },
    src: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: 'aspectFill',
    },
    width: {
      type: [String, Number],
      default: '',
    },
    height: {
      type: [String, Number],
      default: '',
    },
    borderRadius: {
      type: [String, Number],
      default: '',
    },
    customStyle: {
      type: [String, Object],
      default: '',
    },
    lazyLoad: {
      type: Boolean,
      default: false,
    },
    fadeShow: {
      type: Boolean,
      default: true,
    },
    webp: {
      type: Boolean,
      default: false,
    },
    showMenuByLongpress: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    c_style() {
      return mergeStyle(
        {
          width: addUnit(this.width),
          height: addUnit(this.height),
          borderRadius: addUnit(this.borderRadius),
        },
        this.customStyle,
      );
    },
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    },
    handleLoad(e) {
      this.$emit('load', e);
    },
    handleError(e) {
      this.$emit('error', e);
    },
  },
};
</script>
